<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<style>
    table{
        margin-left: 300px;
    }
    h1{
        margin-left: 300px;
        text-align: left;
    }
</style>

<body>
    <div id="app">
        <table border="1px" width=50% height="250px" align="center" cellspacing="0">
            <tr style="background-color: azure;">
                <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                <th>书籍名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            <tr v-for="(element,index) in items" align="center">
                <td>{{element.id}}</td>
                <td>{{element.name}}</td>
                <td>{{element.date}}</td>
                <!-- toFixed(2) 保留两位小数 -->
                <td>¥ {{element.price.toFixed(2)}}</td>
                <td>
                    <input v-bind:disabled="element.count === 1" type="button" name="add" value="-" @click="deleteItem(index)">
                    {{element.count}}
                    <input type="button" name="delete" value="+" @click="addItem(index)">
                </td>
                <td>
                    <input type="button" name="remove" value="移除" @click="removeItem(index)">
                </td>
            </tr>
        </table>
        <h1 width=50% align="center">总价:￥{{totalPrice.toFixed(2)}}</h1>
    </div>
</body>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            items:[
                {id:"1",name:"《Java编程思想》",date:"2020-9",price:98.20,count:1,itemAmount:98.00},
                {id:"2",name:"《数据分析与数据原理》",date:"2019-2",price:39.10,count:1,itemAmount:39.00},
                {id:"3",name:"《Hadoopd》",date:"2019-10",price:59.00,count:1,itemAmount:59.00},
                {id:"4",name:"《代码大全》",date:"2020-9",price:128.00,count:1,itemAmount:128.00},
            ],
            totalPrice: 0.00,
        },

        methods:{
            addItem(index){
                this.items[index].count++;
                this.items[index].itemAmount = this.items[index].count * this.items[index].price;
                this.totalPrice += this.items[index].price;
            },
            deleteItem(index){
                this.items[index].count--;
                this.items[index].itemAmount = this.items[index].count * this.items[index].price;
                this.totalPrice -= this.items[index].price;
            },
            removeItem(index){
                if(confirm("您确定是否删除？")){
                    this.totalPrice -= this.items[index].itemAmount;
                    this.items.splice(index,1);
                }
            },
            data () {
                return {
                    money:0.00
                };
            },
        },

        mounted(){
            this.items.forEach(element => {
                this.totalPrice = this.totalPrice + element.price;
            });
        }
    })

</script>

</html>